<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>博客列表页</title>
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/blog_list.css">

		<!-- 引入 jquery -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<div class="nav">
			<img src="image/333.jpg" alt="">
			<div class="title">我的博客系统</div>
			<div class="spacer"></div>
			<a href="blog_list.html">主页</a>
			<a href="blog_edit.html">写博客</a>
			<a href="logout">注销</a>
		</div>
		<div class="container">
			<div class="container-left">
				<div class="card">
					<img src="image/222.jpg" alt="">
					<h3></h3>
					<a href="https://www.github.com">github 地址</a>
					<div class="counter">
						<span>文章</span>
						<span>分类</span>
					</div>
					<div class="counter">
						<span>2</span>
						<span>1</span>
					</div>
				</div>
			</div>
			<div class="container-right"></div>
		</div>
		<script>
	        // 通过 ajax 给服务器发请求, 获取到所有的博客数据. 并且构造到页面上.
	        function getBlogs() {
	            $.ajax({
	                type: 'get',
	                url: 'blog',
	                success: function(body) {
	                    // 根据返回的数据, 构造出页面中对应的元素
	                    let containerRight = document.querySelector('.container-right');
	                    for (let blog of body) {
	                        let blogDiv = document.createElement("div");
	                        blogDiv.className = 'blog';
	                        let titleDiv = document.createElement("div");
	                        titleDiv.className = 'title';
	                        titleDiv.innerHTML = blog.title;
	                        let dateDiv = document.createElement("div");
	                        dateDiv.className = 'date';
	                        dateDiv.innerHTML = blog.postTime;
	                        let descDiv = document.createElement("div");
	                        descDiv.className = 'desc';
	                        descDiv.innerHTML = blog.content;
	                        let a = document.createElement("a");
	                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
	                        a.innerHTML = '查看全文 &gt;&gt;';

	                        blogDiv.appendChild(titleDiv);
	                        blogDiv.appendChild(dateDiv);
	                        blogDiv.appendChild(descDiv);
	                        blogDiv.appendChild(a);
	                        containerRight.appendChild(blogDiv);
	                    }
	                }
	            });
	        }
	        getBlogs();
	        function getLoginStatus() {
	            $.ajax({
	                type: 'get',
	                url: 'login',
	                success: function(body) {
	                    console.log("用户已经登录了. ");
	                    let h3 = document.querySelector('.card h3');
	                    h3.innerHTML = body.username;
	                },
	                error: function(body) {
	                    location.assign("login.html");
	                }
	            })
	        }
	        // 判定用户的登录状态
	        getLoginStatus();
	    </script>
	</body>
</html>